<template>
  <a-row :gutter="8">
    <a-col :span="16">
      <div class="form-container">
        <a-form
          :form="form"
          :label-col="formLayout.labelCol"
          :wrapper-col="formLayout.wrapperCol">
          <a-form-item label="姓名">
            <a-input
              v-decorator="[
                'name',
                { rules: [{ required: true, message: '请输入姓名' }] },
              ]"
              placeholder="请输入姓名"
            />
          </a-form-item>
          <a-form-item label="年龄" >
            <a-input
              v-decorator="[
                'age',
                { rules: [{ required: ageValid, message: '请输入年龄' }] },
              ]"
              placeholder="请输入年龄"
            />
          </a-form-item>
          <a-form-item label="出生日期">
            <a-date-picker
              style="width: 100%;"
              valueFormat="YYYY-MM-DD"
              v-decorator="[
                'birthday', 
                {rules: [{ required: true, message: '请选择日期' }]}
              ]" 
            />
          </a-form-item>
          <a-form-item label="学历">
            <a-select
              v-decorator="[
                'education',
                { rules: [{ required: true, message: '请选择学历' }] },
              ]"
              placeholder="请选择学历"
            >
              <a-select-option v-for="eduItem in educations"
                :key="eduItem.id"
                :value="eduItem.value">
                {{ eduItem.value }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="地址">
            <a-input
              v-decorator="[
                'address',
                { rules: [{ required: false, message: '请输入地址' }] },
              ]"
              placeholder="请输入地址"
            />
          </a-form-item>
          <a-form-item label="是否锁定">
            <a-radio-group v-decorator="[
              'isLock',
              { initialValue: 0 }
            ]">
              <a-radio :value="1">
                是
              </a-radio>
              <a-radio :value="0">
                否
              </a-radio>
            </a-radio-group>
          </a-form-item>
          <a-form-item
            :label-col="formTailLayout.labelCol"
            :wrapper-col="formTailLayout.wrapperCol">
            <a-checkbox :checked="ageValid" @change="handleChange">
              年龄是否必填
            </a-checkbox>
          </a-form-item>
          <a-form-item
            :label-col="formTailLayout.labelCol"
            :wrapper-col="formTailLayout.wrapperCol">
            <a-button type="primary" @click="handleSubmit">
              提交
            </a-button>
          </a-form-item>
        </a-form>
      </div>
    </a-col>
    <a-col :span="8">
      <a-card
        :bodyStyle="{ height: '700px', overflow: 'auto' }">
        <pre>{{ formData }}</pre>
      </a-card>
    </a-col>
  </a-row>
  
</template>

<script>
import { educations } from '@/enum/enum-common'

export default {
  name: 'BaseForm',
  data() {
    return {
      formLayout: {
        labelCol: { span: 2 },
        wrapperCol: { span: 8 }
      },
      formTailLayout: {
        labelCol: { span: 2 },
        wrapperCol: { span: 8, offset: 2 }
      },
      form: this.$form.createForm(this, { name: 'base_form' }),
      formData: {
        'name': '',
        'age': '',
        'birthday': '',
        'education': undefined,
        'address': '',
        'isLock': 0,
        'score': '',
        'status': '',
        'createTime': ''
      },
      ageValid: false,
    }
  },
  computed: {
    educations () {
      return educations.map((item, index) => {
        return {
          id: index + 1,
          value: item
        }
      })
    }
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        const defaultFrom = {...this.formData}
        this.formData = $.extend(true, {}, defaultFrom, values)
        if (!err) {
          console.log('Received values of form: ', values);
        }
      });
    },
    handleChange(e) {
      this.ageValid = e.target.checked;
      this.$nextTick(() => {
        this.form.validateFields(['age'], { force: true });
      });
    },
  },
}
</script>

<style lang="scss" scoped>
</style>